<script lang="ts">
  import { Plus, LayoutDashboard } from "lucide-svelte";
  import { goto } from "$app/navigation";
  import { APP_BOARD_PATH_PREFIX, getBoardPath } from "$lib/utils/consts";
  import { page } from "$app/state";
  import UserProfile from "./UserProfile.svelte";
  import { userStore } from "$lib/stores/user.svelte";
  import { boardStore } from "$lib/stores/board.svelte";
  import CreateOrAddBoardModal from "./CreateOrAddBoardModal.svelte";

  let showCreateBoardModal = $state(false);
</script>

<div class="h-[calc(100vh-20px)] overflow-y-hidden">
  <UserProfile />
  <div class="mt-2 h-[calc(100vh-120px)] overflow-y-auto overflow-x-hidden">
    <h5 class="h5 flex justify-between p-2 rounded-sm">
      <div class="flex gap-2 items-center">
        <LayoutDashboard size={24} /> 频道
      </div>
      <div>
        <button
          type="button"
          class="hover:preset-filled-primary-900-100 pl-4 pr-4 p-1"
          onclick={(e) => {
            e.stopPropagation();
            e.preventDefault();
            if (userStore.userSession != "") {
              showCreateBoardModal = true;
            } else {
              userStore.showLoginModal = true;
            }
          }}><Plus size={20} /></button
        >
      </div>
    </h5>
    <ul>
      {#each boardStore.webBoardList as webBoard}
        <li
          class={`p-1 pr-3 pl-[30px] rounded-[10px] m-1 ${boardStore.curBoardId == webBoard.boardInfo?.board_id && page.url.pathname.startsWith(APP_BOARD_PATH_PREFIX) ? "preset-filled-primary-300-700" : ""} hover:preset-filled-primary-300-700 flex w-[200px]  gap-2`}
        >
          {#if boardStore.curBoardId == webBoard.boardInfo?.board_id && page.url.pathname.startsWith(APP_BOARD_PATH_PREFIX)}
            {webBoard.boardInfo.basic_info.board_name}
          {:else}
            <div class="relative">
              {#if webBoard.unReadCount > 0}
                <span
                  class="badge-icon preset-filled-primary-500 absolute -left-[30px] -top-0 z-10"
                  >{webBoard.unReadCount}</span
                >
              {/if}
              <button
                type="button"
                class="w-[160px] text-left truncate"
                onclick={() => {
                  goto(
                    getBoardPath(webBoard.boardInfo?.board_id ?? "", "chat"),
                  );
                }}
              >
                {webBoard.boardInfo?.basic_info.board_name}
              </button>
            </div>
          {/if}
        </li>
      {/each}
    </ul>
  </div>

  {#if showCreateBoardModal}
    <CreateOrAddBoardModal onClose={() => (showCreateBoardModal = false)} />
  {/if}
</div>
